<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
</head>
<body>
<!--
表单元素格式：
    type: text(默认) password checkbox radio submit reset file hidden image button
    name: 指定表单元素的名称
    value: 元素的初始值， type 为 radio 时必须指定一个值
    size: 指定表单元素的初始宽度。当 type 为 text 或 password 时,表单元 素的大小以字符为单位。对于其他类型,宽度以像素为单位
    maxlength: type 为 text 或 password 时，输入的最大字符数
    checked: type 为 radio 或 checkbox 时，指定按钮是否被选中
表单的应用：
    隐藏: hidden
    只读: readonly
    禁用: disable
表单验证:
    placeholder 占位符
    required 强制非空
    pattern 正则
-->

<!--GET method form-->
<!--POST method form-->
<form action="index.html" method="post">
    <h3>注册</h3>
    <!--默认值 value-->
    <p>username: <input type="text" name="username" value="admin"></p>
    <p>password: <input type="password" name="password"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

<!--action method-->
<form action="index.html" method="get">
    <!--搜索框-->
    <!--query: name-->
    <h3>Search: <input type="search" name="keyword"></h3>
    <p>性别:
        <!-- radio 单选框 -->
        <!--query: value-->
        <!--default: checked-->
        男: <input type="radio" value="boy" name="sex" checked>
        女: <input type="radio" value="girl" name="sex">
    </p>


    <p>爱好:
        <!--checkbox 复选框-->
        <!--query: name-->
        <!--default: checked-->
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="coding" name="hobby">写代码
        <input type="checkbox" value="talk" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby" checked>游戏
    </p>


    <p>下拉框:
        <!--select 默认选项-->
        <select name="列表名称">
            <!--query: value-->
            <!--default: selected-->
            <option value="china">China</option>
            <option value="japan">Japan</option>
            <option value="canada">Canada</option>
            <option value="american" selected>American</option>
        </select>
    </p>


    <p>文本域:
        <!--提交的 query 参数格式: this+is+textarea-->
        <textarea name="textarea" cols="30" rows="10"></textarea>
    </p>


    <p>
        <!--文件域-->
        <!--query: file-->
        <input type="file" name="file">
    </p>
    <p>
        <input type="button" value="上传文件" name="upload">
    </p>


    <p>邮箱:
        <input type="email" name="email">
    </p>
    <p>URL:
        <input type="url">
    </p>
    <p>数字:
        <!--query: name-->
        <input type="number" name="num" max="100" min="10" step="10">
    </p>


    <p>音量:
        <!--滑块-->
        <input type="range" voice="voice" min="0" max="100">
    </p>


    <p>
        <!--图片按钮-->
        <!--hidden 隐藏-->
        <input type="image" src="https://www.gitee.com/static/images/logo-black.svg" hidden>
    </p>

    <!--鼠标增强 label-->
    <p>
        <label for="mark">Click ME</label>
        <input type="text" id="mark" placeholder="input some content" required>
    </p>

    <p>
        <!--提交按钮, 提价数据-->
        <input type="submit">
        <!--简单按钮，不提交数据,支持 javascript 事件-->
        <!--disabled 禁用-->
        <input type="button" name="btn" value="click me" disabled>

    </p>
</form>


</body>
</html>
